<template>
  <u-popup v-model="show" :mask-close-able="flase" mode="center" width="96%" height="650rpx">
    <view class="popup">
      <text class="title">信息填写</text>
      <view class="inputVuew">
        <view class="inputTip">{{
          prizeCode == 'assistence_recharge_card' ? '请输入要充值的手机号：' : '请输入要开通会员的QQ号：'
        }}</view>
        <u-input v-model="inputText" type="text" :border="true" />
      </view>
      <text class="tipText">注：奖品只能领取1次，提交后，奖品最终会发放到您填写的账号中，请耐心等待</text>
      <u-button class="closeBtn" @click="handleClose">取消</u-button>
      <u-button class="popupBtn" type="primary" @click="handleClick">提交信息</u-button>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    prizeCode: {
      type: String,
      default: "assistence_recharge_card",
    },
  },
  watch: {
    show(newValue, oldValue) {
      console.log('🚀 ~ show ~ newValue:', newValue);
    },
  },
  data() {
    return {
        inputText: "",
    };
  },

  methods: {
    handleClick() {
      if (this.prizeCode == 'assistence_recharge_card') {
        if (this.inputText.length == 0) {
          uni.showToast({
            title: '请输入手机号',
            icon: 'none',
          });
          return;
        } else if (this.inputText.length != 11) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
          });
          return;
        }
      } else {
        if (this.inputText.length < 5) {
          uni.showToast({
            title: '请输入正确的QQ号',
            icon: 'none',
          });
          return;
        }
      }
      this.$emit('didClick',this.inputText,this.prizeCode);
    },
    handleClose() {
        this.$emit('didClose');
    }
  },
};
</script>

<style lang="scss" scoped>
.popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
  .title {
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #454b5b;
    margin-top: 70rpx;
    margin-bottom: 50rpx;
  }

  .tipText {
    margin: 10rpx 35rpx;
    color: #b3b2b2;
    font-size: 24rpx;
  }

  .inputVuew {
    width: 90%;
    .inputTip {
      color: #b3b2b2;
      font-size: 24rpx;
      margin-bottom: 20rpx;
    }
  }

  .popupBtn {
    position: absolute;
    bottom: 40rpx;
    left: 290rpx;
    right: 52rpx;
  }
  .closeBtn {
    position: absolute;
    bottom: 40rpx;
    left: 52rpx;
    right: 52rpx;
    width: 200rpx;
  }
}
</style>
